<template>
  <!-- 我的消息 -->
  <div class="news">
    <div class="news_tip">
      <img src="../../assets/account/icon_wdxx_xx@2x.png" alt="" />
      <span>共收消息{{ total }}封</span>
    </div>
    <div class="news_title">我的消息</div>
    <div class="news_classify">
      <span>消息分类</span>
      <el-select
        v-model="newsClassification"
        placeholder="请选择"
        @change="classificationChange"
      >
        <el-option
          v-for="item in ClassificationOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span>消息状态</span>
      <el-select v-model="newType" placeholder="请选择" @change="typeChange">
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="news_list" v-if="newsList.length > 0">
      <div class="news_box" v-for="(item, index) in newsList" :key="index">
        <div class="news_boxinside">
          <div class="news_box_left">
            <div class="news_box_title">{{ item.title }}</div>
            <div class="news_reason" v-if="item.content !=='' && item.type == 'OFF_SHELF'">
            {{item.content}}</div>
            <div class="news_box_content" v-if="item.bizDetail !== ''">
              <p
                v-if="item.bizDetail.companyName && item.type !== 'INFORMATION'"
              >
                公司名：{{ item.bizDetail.companyName }}
              </p>
              <p v-if="item.bizDetail.name">
                联系人：{{ item.bizDetail.name }}
              </p>
              <p v-if="item.bizDetail.mobile">
                联系方式：{{ item.bizDetail.mobile }}
              </p>
              <p v-if="item.bizDetail.address && item.type == 'SAMPLE'">
                地址：{{ item.bizDetail.address }}
              </p>
              <p v-if="item.bizDetail.remark && item.type == 'SAMPLE'">
                备注：{{ item.bizDetail.remark }}
              </p>
              <p v-if="item.bizDetail.intentionalPrice">
                意向价：{{ item.bizDetail.intentionalPrice }}
              </p>
              <p
                v-if="item.bizDetail.refusalCause && item.type == 'INFORMATION'"
              >
                原因：{{ item.bizDetail.refusalCause }}
              </p>
            </div>
            <div class="news_loseEfficacyTime" v-if="item.content !== '' && item.type =='VIP_RENEWAL'">
              <!-- 您的会员期限是{{JSON.parse (item.content)[0]}}，截止至目前为止，还有{{JSON.parse (item.content)[1]}}即将过期。为了更好的体验，请您尽快续费。  -->
              您的VIP将于{{JSON.parse(item.content)[0].substr(11,21)}}后失效，还有{{JSON.parse(item.content)[1]}}即将过期，为了不影响您使用高级功能，请尽快缴费
              </div>
            <div class="news_box_time">{{ item.createdTime }}</div>
            
          </div>
          <div v-if="item.type !=='VIP_RENEWAL'" class="news_box_deltte" @click="showDelDialog(index)">删除</div>
          <div v-else class="news_box_deltte" @click="Renew">立即续费>></div>
        </div>
      </div>
    </div>

    <div class="test" v-else>当前您还没有收到消息</div>

    <!-- 分页 -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
      v-if="newsList.length > 0"
    >
    </el-pagination>

    <!-- 删除弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="delDialog"
      width="5.71rem"
      center
      class="del_dialog"
    >
      <span>是否删除此条信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialog = false">取消</el-button>
        <el-button type="primary" @click="delAttention(currentIndex)"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 收费二维码 -->
    <el-dialog
      title="续费二维码"
      :visible.sync="chargeDialog"
      width="5.71rem"
      center
      class="chargeDialog button"
    >
      <img :src="this.codeUrl | urlLoad" id="qrcode" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.getNotificationList();
    this.getNews();
    let info = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = info;
  },
  data() {
    return {
      newsClassification: 0,
      newType: -1,
      ClassificationOptions: [
        { value: 0, label: "全部" },
        { value: 1, label: "留言消息" },
        { value: 2, label: "审核通知" },
        { value: 3, label: "系统消息" },
      ],
      typeOptions: [
        { value: -1, label: "全部" },
        { value: 0, label: "未读" },
        { value: 1, label: "已读" },
      ],
      newsList: [],
      notificationCount: 0,
      currentIndex: -1,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      delDialog: false,
      chargeDialog:false,
      userInfo: {},
      codeUrl:""
    };
  },
  methods: {
    // 页面切换
    handleCurrentChange(value) {
      this.pageNo = value;
      this.getNews();
    },
    // 消息分类
    classificationChange(value) {
      this.newsClassification = value;
      this.getNews();
    },
    // 消息类型(已读未读)
    typeChange(value) {
      this.newType = value;
      this.getNews();
    },
    // 消息数
    async getNotificationList() {
      let res = await this.$apiFun.getNotificationUnread();
      this.notificationCount = res.result;
    },
    // 四种消息
    async getNews() {
      let params = {
        pageNo: this.pageNo,
        readed: this.newType == -1 ? "" : this.newType,
        name: 1,
      };
      let methods = {
        0: "allNotificationList",
        1: "getMessageList",
        2: "getReviewList",
        3: "getSystemList",
      };
      let type = methods[this.newsClassification];
      let res = await this.$apiFun[type](params);
      this.newsList = res.result.rows;
      this.total = Number(res.result.total);
    },

    // 显示删除弹窗
    showDelDialog(index) {
      this.currentIndex = index;
      this.delDialog = true;
    },

    // 续费
    Renew() {
      this.chargeDialog = true;
      this.openMember();
    },

    // 获取支付二维码
    async openMember() {
      let params = {
        orderIdOrSN: "1",
        payType: "WXNATIVE",
        tradeType: "NATIVE",
      };

      if (this.userInfo.hasSupplierInformation == 1) {
        let res = await this.$apiFun.openMember(params);
        this.codeUrl = res.result;
        // this.payReturn()
      } else {
        this.$message({
          type: "error",
          message: "当前您还没入驻供应商，请先入驻供应商",
          duration: 1500,
        });
        this.chargeDialog = false;

        setTimeout(() => {
          this.$router.push("supplier_enter");
        }, 2000);
      }
    },

    // 删除
    async delAttention() {
      let res = await this.$apiFun.deleteMessage({
        id: this.newsList[this.currentIndex].id,
      });
      if (res.code == 200) {
        this.newsList.splice(this.currentIndex, 1);
        this.delDialog = false;
        this.$message({
          duration: 1500,
          message: "操作成功",
          type: "success",
        });
        this.getNews();
      } else {
        this.$message({
          duration: 1500,
          message: "操作失败",
          type: "error",
        });
      }
    },
  },
  deactivated(){
    this.getNotificationList();
    this.getNews();
  }
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      margin-left: 0.3rem;
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
  }
  .el-dialog__body {
    text-align: center;
    span {
      font-size: 0.2rem;
      font-weight: 400;
      color: #333333;
    }
  }
  .el-dialog__footer {
    height: 0.7rem;
    padding: 0;
    .dialog-footer {
      width: 100%;
      height: 0.4rem !important;
      display: flex;
      justify-content: center;

      .el-button--default {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 5px;
        display: block;
      }
      .el-button--primary {
        width: 2rem;
        line-height: 0.1rem;
        height: 0.4rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        margin-left: 0.3rem;
        display: block;
      }
    }
  }
}
.news {
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 0.3rem 0.5rem 0.2rem;
  height: 93.5%;
  .news_tip {
    background: #f425511a;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.1rem 0.16rem;
    img {
      width: 0.36rem;
      height: 0.36rem;
      margin-right: 0.06rem;
    }
    span {
      font-size: 0.18rem;
      font-weight: 400;
      color: #666666;
    }
  }
  .news_title {
    margin: 0.3rem 0rem;
    text-align: left;
    font-size: 0.24rem;
    font-weight: bold;
    color: #333333;
  }
  .news_classify {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.3rem;
    span {
      font-size: 0.18rem;
      font-weight: 400;
      color: #333333;
    }
    /deep/.el-select {
      margin: 0rem 0.4rem 0rem 0.2rem;
    }
  }
  .news_list {
    .news_box {
      background: #efefef;
      border-radius: 5px;
      padding: 0.16rem 0.3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.1rem;
      .news_boxinside {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .news_box_left {
          text-align: left;
          .news_box_title {
            font-size: 0.2rem;
            font-weight: bold;
            color: #333333;
          }
          .news_reason,
          .news_box_content,
          .news_loseEfficacyTime {
            margin: 0.15rem 0rem;
            font-size: 0.2rem;
            font-weight: 400;
            color: #333333;
            p {
              margin-block-start: 0.05rem;
              margin-block-end: 0.05rem;
            }
          }
          .news_box_time
           {
            font-size: 0.16rem;
            font-weight: 400;
            color: #999999;
          }
        }
        .news_box_right {
          font-size: 0.18rem;
          font-weight: 400;
          color: #3756df;
        }
        .news_box_deltte {
          width: 1.4rem;
          height: 0.4rem;
          line-height: 0.4rem;
          border-radius: 5px;
          border: none;
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          color: #f42551;
          font-weight: bold;
          background: transparent;
          cursor: pointer;
        }
      }
    }
  }
  .test {
    font-size: 0.2rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 0.3rem;
    text-align: center;
    margin-top: 0.5rem;
    opacity: 0.7;
  }

  // 续费


  .chargeDialog {
    font-family: Microsoft YaHei;
    /deep/ .el-dialog__header {
      justify-content: center;
      .el-dialog__title {
        font-size: 0.2rem;
        margin-left: 0;
      }
    }
    /deep/ .el-dialog__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      .qrcode,
      #qrcode {
        width: 1.8rem;
        height: 1.8rem;
      }
      span {
        font-size: 0.2rem;
        font-weight: 400;
        color: #333333;
        line-height: 0.3rem;
      }
      .text {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
}

// 分页样式
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f42551;
}
</style>